<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Numbric, bookItem } from '../types/app.ts'
import axios from '../utils/http.ts';
const bookList = ref<bookItem[]>([]);
onMounted(async () => {
  const res = await axios.get<bookItem[]>('/books/queryall');
  bookList.value = res.data;
  bookList.value.forEach(item => item.checked = false);
  console.log(bookList);
})
const delAll = () => {
  bookList.value = bookList.value.filter(item => item.checked === false);
}




const delBook = (id: Numbric): void => {
  bookList.value = bookList.value.filter(book => book.id !== id);
}
const addCheck = (index: number): void => {
  bookList.value[index].checked =!bookList.value[index].checked;

}
</script>

<template>
  <h3>分类</h3>
  <ul class="bookList">
    <li v-for="item,index in bookList" :key="item.id">
      <input @click="addCheck(index)" :checked="item.checked" type="checkbox">
      {{ item.bookname }}
      <input @click="delBook(item.id)" type="button" value="删除">
    </li>
  </ul>
  <div>
    <input type="button" @click="delAll" value="多选删除">
  </div>
</template>

<style></style>